import { ProTable, ActionType } from '@ant-design/pro-components';
import React, { useRef } from 'react';
import { message, Space, Button, Modal } from 'antd';
import { useRequest } from 'ahooks';
import { brandV1AdminControllerIndex, brandV1AdminControllerDestroy } from '@/services/auto/brandAdmin';
import Add from "./component/Add";
import { completeImgUrl } from "common/utils/utils";

export default () => {
  const actionRef = useRef<ActionType>();

  const { runAsync: deleteRun } = useRequest(brandV1AdminControllerDestroy, {
    manual: true,
    onSuccess: () => {
      message.success('删除成功');
      actionRef.current?.reload();
    },
  });

  return (
    <>
      <ProTable<API.BrandAdminIndexResult, API.BrandV1AdminControllerIndexParams>
        actionRef={actionRef}
        rowKey="uuid"
        toolBarRender={() => [
          <Add key="add" reload={()=>{
            actionRef.current?.reload();
          }}>
            <Button type="primary">
              添加品牌
            </Button>
          </Add>
        ]}
        request={(params) => {
          const {
            pageSize,
            current,
            title,
            status,
          } = params;
          return brandV1AdminControllerIndex({
            pageSize,
            pageIndex: current,
            title,
            status,
          }).then((res) => {
            return {
              success: true,
              data: res.list,
              total: res.total,
            };
          });
        }}
        columns={[
          {
            title: 'logo',
            key: 'logo',
            hideInSearch: true,
            render: (_, record)=>{
              return record.img ? <img src={completeImgUrl(record.img)} style={{height: 50, width: 50}}/> : '-'
            }
          },
          {
            title: '标题',
            dataIndex: 'title',
          },
          {
            title: '描述',
            hideInSearch: true,
            dataIndex: 'desc',
          },
          {
            align: 'center',
            title: '操作',
            key: 'option',
            valueType: 'option',
            width: 120,
            render: (_, record) => {
              return (
                <Space direction="vertical" size={0}>
                  <Add data={record} reload={()=>{
                    actionRef.current?.reload();
                  }}>
                    <Button type="link">
                      编辑
                    </Button>
                  </Add>
                  <Button type="link" danger onClick={()=>{
                    Modal.confirm({
                      title: '删除后不可恢复，确定删除当前品牌？',
                      onOk: ()=>{
                        return deleteRun({uuid: record.uuid});
                      }
                    })
                  }}>
                    删除
                  </Button>
                </Space>
              );
            },
          },
        ]}
      />
    </>
  );
};
